<style>
#red{background:red;width:120px;height:120px;}
  #green{background:green;width:80px;height:80px;}
  #yellow{background:yellow;width:40px;height:40px;}
</style>
<div id="red">
    <div id="green">
    <div id="yellow"></div>
</div>
</div>
<script>
var red=document.getElementById('red');
var green=document.getElementById('green');
var yellow=document.getElementById('yellow');
red.onclick=function(){console.log('red');};
green.onclick=function(){console.log('green');};
yellow.onclick=function(){console.log('yellow');};
</script>
<a id="test" href="http://www.example.com">默认链接</a>
<script>
  document.getElementById('test').onclick = function(e) {
    if (window.event) {    // 早期版本IE浏览器
      window.event.returnValue = false;
    } else {               //标准浏览器
      e.preventDefault();
    }
  };
</script>
<script>
        red.onclick = function(e) {
          // func(e);
          console.log('red');
        };
        green.onclick = function(e) {
          // func(e);
          console.log('green');
        };
        yellow.onclick = function(e) {
          // func(e);
          console.log('yellow');
        };
        function func(e) {
          if (window.event) {    // 早期版本的的浏览器
            window.event.cancelBubble = true;
          } else {               //标准浏览器
            e.stopPropagation();
          }
        }
      </script>